<template>
  <div class="risk">
    <div class="add" @click="add" v-if="editable">创建检查计划</div>
   
    <eagle-tab-page-list
      url="/DangerCheckPlan/GetPageData"
      :params="params"
      @initActive="_initActive"
      @initList="_initList"
    >
          <div>
            <eagle-cell class="card" v-for="(item, index) in list" :key="index">
            <div @click.stop="goDetail(item)">
              <div class="dep_sort">
                <div>
                  {{ item.CheckPlanName }}
                </div>
              </div>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="10">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_type.png"
                    alt=""
                  />{{ item.CheckTypeName }}
                </eagle-col>
                <eagle-col span="14">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_user.png"
                    alt=""
                  />{{ item.CreateChnName }}
                </eagle-col>
              </eagle-row>
              <eagle-row gutter="20" class="dep_sort">
                <eagle-col span="10">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_time.png"
                    alt=""
                  />{{ item.StatusName }}
                </eagle-col>
                <eagle-col span="14">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_repeat.png"
                    alt=""
                  />{{ item.CheckFrequencyName }}
                </eagle-col>
              </eagle-row>
              <eagle-row class="dep_sort">
                <eagle-col>
                  <img src="@/assets/Images/AppIcon/icon_list_date.png" alt="" />
                  {{ item.StartDate }} 至 {{ item.EndDate }}
                </eagle-col>
              </eagle-row>
              <eagle-divider />
              <eagle-button
                class="ml-10 mb-5"
                style="float: right;height:30px;"
                v-if="item.AllowDelete"
                size="small"
                type="default"
                @@click.stop ="deletePlan(item)"
              >删除
              </eagle-button>
              <eagle-button
                class="ml-10 mb-5"
                style="float: right;height:30px;"
                v-if="item.AllowPublish"
                size="small"
                type="default"
                @@click.stop ="publishPlan(item)"
              >发布
              </eagle-button>
              <eagle-button
                class="ml-10 mb-5"
                style="float: right;height:30px;"
                v-if="item.AllowEnd"
                size="small"
                type="default"
                @@click.stop ="endPlan(item)"
              >结束
              </eagle-button>
              <eagle-button
                class="ml-10 mb-5"
                style="float: right;height:30px;"
                v-if="item.AllowTrack"
                size="small"
                type="default"
                @@click.stop ="followPlan(item)"
              >跟踪
              </eagle-button>
              <eagle-button
                class="ml-10 mb-5"
                style="float: right;height:30px;"
                v-if="item.AllowRevoke"
                size="small"
                type="default"
                @@click.stop ="backPlan(item)"
              >撤销
              </eagle-button>
              <eagle-button
                class="ml-10 mb-5"
                style="float: right;height:30px;"
                size="small"
                type="default"
                @@click.stop ="goApprove(item)"
              >审批历史
              </eagle-button>
            </div>
          </eagle-cell>
          </div>
    </eagle-tab-page-list>
    <!-- 弹出层 -->
    <eagle-dialog v-model="show" @close="show=false" :showConfirmButton="false" confirmText="结束计划" @confirm="endBackConfirm('false')">
        <div class="dialog-content-radio">
          <span>您确定要结束该检查计划吗?</span>
        </div>
    </eagle-dialog>
  </div>
</template>

<script>
import { getDateTime } from "@/utils/getDate";
export default {
  data() {
    return {
      active: 0,
      editable:false,
      list: [],
      conditions: {},
      controller: "/DangerCheckPlan",
      queryParams: {
          dataType: "List",
          keywords: "",
          cType:1,
      },
      id: "",
      show: false,
      params: [
        {
          title: "未发布",
          dataType: "NotPublish",
          badge: false,
        },
        {
          title: "进行中",
          dataType: "NotEnd",
          badge: false,
        },
        {
          title: "已结束",
          dataType: "Ended",
          badge: false,
        },
      ],
    };
  },
  created() {
    if (this.$route.query.editable) {
      this.editable=true
    }
  },
  methods: {
    _initActive(active) {
      this.active = active;
    },
    _initList(list) {
      this.list = list;
    },
    bindData(data) {
      this.list = [];
      if (data) {
          this.list = data;
      }
    },
    // 删除
    deletePlan(item) {
      const that = this;

      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要删除该检查计划吗？",
        })
        .then(() => {
          that.$axios
          .get("/DangerCheckPlan/Delete",{params:{ id: item.ID }})
          .then((res)=>{
            that.$toast.success('删除成功！')
            that.$refs.eaglePageList.search();
          })
        })
        .catch(() => {
          // on cancel
        });
    },

    endPlan(item) {
      this.show = true;
      this.id = item.ID;
    },

    endBackConfirm(params) {
      let that = this;
      that.$axios
      .get("/DangerCheckPlan/End",{params:{ id: that.id, finishTask: params}})
      .then(()=>{
        that.$toast.success('结束成功！')
        that.show = false
        that.$refs.eaglePageList.search();
      })
    },

    publishPlan(item) {
      const that = this;

      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要发布该检查计划吗？",
        })
        .then(() => {
          that.$axios
          .get("/DangerCheckPlan/Publish",{params:{ id: item.ID}})
          .then(()=>{
            this.$toast.success('发布成功！')
            that.$refs.eaglePageList.search();
          })
        })
        .catch(() => {
          // on cancel
        });
    },

    backPlan(item) {
      const that = this;
      that.$dialog
        .confirm({
          title: "询问",
          message: "您确定要撤回该检查计划吗？",
        })
        .then(() => {
          that.$axios
          .get("/DangerCheckPlan/Revoke",{params:{ id: item.ID}})
          .then(()=>{
            that.$toast.success('撤回成功！')
            that.$refs.eaglePageList.search();
          })
        })
        .catch(() => {
          // on cancel
        });
    },

    goApprove(item) {
      this.$router.push("/Common/ApproveHistory?recordID=" + item.ID+"&operate=publish&opController=DangerCheckPlan");
    },

    followPlan(item) {
      this.$router.push("/Danger/DangerCheckPlanFollow?CPCode=" + item.CPCode);
    },

    // 详情
    goDetail(item) {
      if (!item.AllowEdit) {
        this.$router.push({
          path: "/Danger/CheckPlanDetail",
          query: { id: item.ID },
        });
      } else {
        this.$router.push({
          path: "/Danger/CheckPlanEdit",
          query: { id: item.ID },
        });
      }
     
    },
    add(){
      this.$router.push({
                path: "/Danger/CheckPlanEdit",
                query: {
                    id: 0,
                },
            });
    }
  },
};
</script>

<style lang="less" scoped>
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}

// 弹框
.dialog-content {
  .dialog-content-radio {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 15px;
  }
}
</style>
